import { NavigationProp, RouteProp } from '@react-navigation/native';
import React, { useEffect, useState } from 'react';
import { StyleSheet } from 'react-native';
import { Text, View } from 'native-base';
import { LinearGradient } from 'react-native-linear-gradient';
import { Touchable } from 'react-native-toast-message/lib/src/components/Touchable';
import { useReactive } from 'ahooks';
import UserRequest from '../../../request/userRequest.ts';
import { Loading } from '../../../component/LoadingOverlay.tsx';

interface IPointsManagementProps {
  navigation: NavigationProp<any, 'pointsManagement'>;
  route: RouteProp<{ pointsManagement: any }, 'pointsManagement'>;
}
const PointsManagement: React.FC<IPointsManagementProps> = ({ navigation, route }) => {
  const state = useReactive({
    point: 0,
  });
  useEffect(() => {
    Loading.show('加载中');
    UserRequest.GetPoints({})
      .then((res) => {
        Loading.hide();
        state.point = res.data;
      })
      .catch(() => Loading.hide());
  }, []);
  return (
    <React.Fragment>
      <View style={styles.root}>
        <LinearGradient start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} colors={['#f9edda', '#f9edda', '#ddc4a2']} style={styles.box}>
          <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
            <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-end' }}>
              <Text fontSize={28} marginRight={2}>
                {state.point}
              </Text>
              <Text fontSize={12} marginBottom={1.5}>
                积分
              </Text>
            </View>
            <Touchable style={{ backgroundColor: '#c29869', paddingVertical: 8, paddingHorizontal: 22, borderRadius: 22 }} onPress={() => navigation.navigate('pointsDetails')}>
              <Text color={'#ffffff'} fontSize={12}>
                积分账单
              </Text>
            </Touchable>
          </View>
        </LinearGradient>
      </View>
    </React.Fragment>
  );
};
const styles = StyleSheet.create({
  root: { flex: 1, padding: 16 },
  box: { borderRadius: 8, marginBottom: 16, paddingHorizontal: 20, paddingVertical: 28 },
});

export default PointsManagement;
